import { Component, OnInit, ViewChild, OnDestroy, Output, EventEmitter } from '@angular/core';

import { MyDatePicker } from '../../modules/my-date-picker/my-date-picker.component';

import { AlertsService } from '../../modules/ng2-alerts';

import { Http} from '@angular/http';

@Component({
  selector: "date-range",
  templateUrl: './date.range.component.html',
  styleUrls: ['./date.range.component.css']
})

export class DateRange implements OnInit {

  @ViewChild('mydp') mydp: MyDatePicker;
  @ViewChild('mydp1') mydp1: MyDatePicker;

  @Output('dateEmit') dateEmit: EventEmitter<any> = new EventEmitter<any>();

  timeType: string = 'day';

  // date option
  myDatePickerOptions: any = {
    editableDateField: false,
    sunHighlight: false,
    disableUntil: {},
    disableSince: {},
    markDates: [],
    highlightDates: []
  };

  constructor(private alertService: AlertsService,private http:Http) { }



  // 日历
  dayModel: any = {
    begin: '',
    end: ''
  };

  timeEvent:any;
  ngOnInit() {

    let date = new Date("2017/12/03");

    let date2 = new Date("2017/12/03");
    date2.setDate(date2.getDate()+1);
    date2.setMonth(date2.getMonth()-3);

    this.myDatePickerOptions.disableSince = {
      year: date.getFullYear(),
      month: date.getMonth() + 1,
      day: date.getDate()
    };
    this.myDatePickerOptions.disableUntil = {
      year: date2.getFullYear(),
      month: date2.getMonth()  + 1,
      day: date2.getDate()
    };

    setTimeout(()=>{

      let date = new Date("2017/12/03");

      let date2 = new Date("2017/12/03");
      date2.setDate(date2.getDate()+1);
      date2.setMonth(date2.getMonth()-3);


      // 限制
      this.myDatePickerOptions.disableSince = {
        year: date.getFullYear(),
        month: date.getMonth() + 1,
        day: date.getDate()
      };
      this.myDatePickerOptions.disableUntil = {
        year: date2.getFullYear(),
        month: date2.getMonth()  + 1,
        day: date2.getDate()
      };



      // init
      this.dayModel.begin = { date: { year: date.getFullYear(), month: date.getMonth(), day: date.getDate() } };

      this.dayModel.end = { date: { year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate() } };

      this.date.begin = date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate() + ' 00:00:00';
      this.date.end = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' 00:00:00';

      this.dateEmit.emit({
        timeType: 'day',
        date: this.date
      });

      // 月
      this.monthSelectListInit();

    },190);



  }

  ngOnDestroy() {
    if(this.timeEvent){
      this.timeEvent.unsubscribe();
    }
    if(this.dateEmit){
      this.dateEmit.unsubscribe();
    }


  }



  search() {


    if (this.timeType == 'day') {

      if (!this.dateCompare(this.date)) {
        return;
      }
      this.dateEmit.emit({
        timeType: 'day',
        date: this.date
      });
    } else {

      if (!this.dateCompare(this.monthDate)) {
        return;
      }

      this.dateEmit.emit({
        timeType: 'month',
        date: this.monthDate
      });
    }

  }


  // month
  monthSelectList: any = [];
  monthDate: any = {
    begin: '',
    end: ''
  };

  // day
  date: any = {
    begin: '',
    end: ''
  };


  // date日历的日期选择
  onDateChanged(event, key) {
    console.log(event);

    this.date[key] = event.formatted + " 00:00:00";

  }

  // 月份select init
  monthSelectListInit() {

   

      let d = new Date();//start

      let d2 = new Date();//end

      for (let i = 0; i < 12; i++) {

        d.setMonth(d.getMonth() - 1);

        this.monthSelectList.push({
          id: i,
          date: d.getFullYear()+"-"+(d.getMonth() + 1)+"-"+d.getDate()+" 00:00:00",
          date_end: d2.getFullYear()+"-"+(d2.getMonth() + 1)+"-"+d.getDate()+" 00:00:00",
          value: d.getFullYear() + '年' + (d.getMonth() + 1) + '月'
        });

        d2.setMonth(d2.getMonth() - 1);
        // console.log(d.getFullYear() + '年' + (d.getMonth() + 1) + '月');
      }

      console.log(this.monthSelectList);

      this.monthDate.begin = this.monthSelectList[1].date;
      this.monthDate.end = this.monthSelectList[0].date_end;




   

  }


  //date比较大小
  dateCompare(_date) {

    let date = new Date(_date.begin).getTime();
    let date2 = new Date(_date.end).getTime();

    if (date > date2) {
      this.alertService.create('info', '结束日必须大于开始日', { duration: 2000 });
      return false;
    }

    return true;

  }





}
